<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname" />
        年龄：<input type="text" class="age" name="age" />
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary" />
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

            <!-- {
                stuId: 1001,
                uname: '欧阳霸天',
                age: 19,
                gender: '男',
                salary: '20000',
                city: '上海', 
             }, -->

            <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
        </tbody>
    </table>
    <script>
       const tbody=document.querySelector('tbody')
       const form=document.querySelector('form')
       const input=form.querySelectorAll('[name]')
       const shujv=JSON.parse(localStorage.getItem('stadInfo'))|| [
       
           
       ]
       function diaoyong(data){
        const zifuchuan= shujv.map(function(item,index){
            const tr=`
            <tr>
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id=${index}>删除</a>
          </td>
        </tr> 
            `
        return tr
        })
        tbody.innerHTML=zifuchuan.join('')
       }
       diaoyong(shujv)

       form.addEventListener('submit',function(e){
        e.preventDefault()
        for(let i=0;i<shujv.length;i++){
            if(input[i].value==='') return alert('不能为空')
        }
        const obj={
                stuId: shujv[shujv.length-1]?.stuId+1 || 1,
                uname: input[0].value,
                age: input[1].value,
                gender:input[2].value,
                salary: input[3].value,
                city: input[4].value, 
        }
        shujv.push(obj)
        diaoyong(shujv)
        const aa= localStorage.setItem('stadInfo',JSON.stringify(shujv));
        this.reset()
       })
       
       tbody.addEventListener('click',function(e){
        if(e.target.tagName==='A')
        shujv.splice(e.target.dataset.id,1)
        diaoyong(shujv)
        localStorage.setItem('stadInfo',JSON.stringify(shujv));
       })
    </script>
</body>

</html>